<script setup>
import { fetchNowData } from "@/api/weatherAPI";
import { fetchAirData } from "@/api/weatherAPI";
import { ref, watch, computed } from "vue";
// 引入和风天气图标
import 'qweather-icons/font/qweather-icons.css'
// 引入dayjs日期库
import dayjs from 'dayjs';
// 引入状态管理
import { useCityStore } from "../stores/cityStore";

// 获取store实例
const cityStore = useCityStore();

// 定义响应式数据
const nowData = ref({}); //对应res中的now属性
const updateTime = ref('');//对应res中的updateTime属性
const airData = ref ({})  //对应空气质量res中的now属性
// 添加侦听器，监听location的变化
watch(
  // 第一个监听器必选：监听的内容
  () => cityStore.location,
  // 第二个监听器必选：监听到变化后执行的回调函数
  () => {
    getData(cityStore.location.id);
  },
  // 第三个监听器可选：配置选项
  { immediate: true }
)
// // 初始调用getData
// getData(cityStore.location.id);

// 网络请求，异步获取API数据并处理
async function getData(locationID) {
  const res = await fetchNowData(locationID);  //获取实时天气数据
  // console.log(res)  //实时天气数据
  nowData.value = res.now;//响应式数据存放后端api的数据
  updateTime.value = dayjs(res.updateTime).format('YYYY-MM-DD HH:mm');//格式化更新时间
  
  const resAir = await fetchAirData(cityStore.location.lat, cityStore.location.lon)
  console.log(resAir)  //实时空气质量数据
  airData.value = resAir.indexes[0]

  
}
//计算属性
const airText = computed(() => {
  const aqi = airData.value.aqi
  if (aqi <= 50) {
    return '优'
  } else if (aqi <= 100) {
    return '良'
  } else if (aqi <= 150) {
    return '轻度污染'
  } else if (aqi <= 200) {
    return '中度污染'
  } else if (aqi <= 300) {
    return '重度污染'
  } else if (aqi <= 500) {
    return '严重污染'
  } else {
    return '爆表'
  }
})
</script>

<template>
  <div class="now">
    <div class="top">
      <span> {{ cityStore.location.name }}</span>
      <span>{{ updateTime }}</span>
    </div>
    <div class="mid">
      <div class="air">
        <p>AQI{{ airText }}</p>
      </div>
      <div class="weather">
        <!-- 模板字符串解决字符串常量和变量的拼接 -->
        <i :class="`qi-${nowData.icon}`"></i>
        <div>
          <p>{{ nowData.temp }}</p>
          <p>{{ nowData.text }}</p>
        </div>
      </div>
      <div class="text"></div>
    </div>
    <div class="bottom">
      <div>
        <p>{{ nowData.windScale }}级</p>
        <p>{{ nowData.windDir }}</p>
      </div>
      <div>
        <p>{{ nowData.humidity }}%</p>
        <p>相对湿度</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.now {
  width: 30rem;
  background-color: antiquewhite;
  border-radius: 1rem;
  padding: 1rem 0;
}

.now .top {
  padding: 1rem;
  overflow: hidden;
}

.now .top>span:nth-last-of-type(1) {
  float: right;
}

.weather {
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather i {
  font-size: 3rem;
  margin-right: 1rem;
}

.weather>div>p:nth-of-type(1) {
  font-size: 2rem;
}

.weather>div>p:nth-of-type(2) {
  font-size: 1rem;
}

.bottom {
  width: 80%;
  margin: 0 auto;
  background-color: #dcdfe9;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.air {
  padding: 1rem;
  overflow: hidden;
}
.air > p {
  text-align: center;
  width: 6rem;
  height: 2rem;
  line-height: 2rem;
  background-color: #a9a538;
  border-radius: 1rem;
  color: white;
  float: right;
}
</style>